<script setup>
import { ref, defineProps, defineEmits } from 'vue'
const emit = defineEmits(['change'])
const props = defineProps({
    pageNum: Number,
    pageSize: Number,
    total: Number,
})
const pageNum = ref(props.pageNum)
const pageSize = ref(props.pageSize)
const total = ref(props.total)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (pageSize) => {
    emit('change', pageSize, pageNum.value)
}
const handleCurrentChange = (pageNum) => {
    emit('change', pageSize.value, pageNum)
}
</script>

<template>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<style lang="less" scoped></style>